<template>
    <div>
        <a-modal
            title="查询工单"
            :bodyStyle="{ height: '600px', overflow: 'auto' }"
            centered
            v-model:visible="visible"
            :width="1000"
            @ok="handleSave"
            @cancel="handleCancel"
        >
            <a-form @keypress.enter="handleSearch">
                <flexbox wrap="wrap">
                    <a-row>
                        <a-col :span="8">
                            <flexbox class="cell-item">
                                <span>涉及系统：</span>
                                {{ detail.systemName }}
                            </flexbox>
                        </a-col>
                        <a-col :span="8">
                            <flexbox class="cell-item" style="margin-right: 16px">
                                <span style="flex-shrink: 0">工单编号：</span>
                                <a-input allowClear v-model:value="form.orderNumber" />
                            </flexbox>
                        </a-col>
                        <a-col :span="8">
                            <flexbox class="cell-item">
                                <span style="flex-shrink: 0">工单名称：</span>
                                <a-input allowClear v-model:value="form.changeName" />
                            </flexbox>
                        </a-col>
                        <a-col :span="8">
                            <flexbox class="cell-item">
                                <span style="flex-shrink: 0">工单状态：</span>
                                <a-select v-model:value="form.orderStatus" allowClear style="width: 160px">
                                    <a-select-option v-for="item of statusOptions" :key="item.value">
                                        {{ item.name }}
                                    </a-select-option>
                                </a-select>
                            </flexbox>
                        </a-col>
                    </a-row>

                    <flexbox justify="flex-end" style="flex: 1; margin-bottom: 8px">
                        <a-button type="primary" @click="handleSearch">查询</a-button>
                    </flexbox>
                </flexbox>
            </a-form>

            <div>
                <CustomTable
                    :scroll="{ x: 'max-content', y: 340 }"
                    rowKey="id"
                    size="small"
                    :loading="loading"
                    :columns="tableColumns"
                    :data-source="list"
                    :pagination="paginationConfig"
                    :row-selection="{ type: 'radio', selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps }"
                    @change="handleTableChange"
                    @row-click="handleRowClick"
                >
                </CustomTable>
            </div>

            <template #footer>
                <flexbox justify="flex-end" class="btn-group">
                    <a-button @click="visible = false">取消</a-button>
                    <a-button type="primary" :disabled="!selectedRowKeys.length" @click="handleSave">关联工单</a-button>
                </flexbox>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { message } from 'ant-design-vue/es';
import { CustomTable } from '@/components';
import { useTableRowSelect } from '@/components/Table/hooks/index';
import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        CustomTable
    },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    emits: ['success'],
    setup(props, { emit }) {
        const { selectedRowKeys, allSelectedRows, onSelectChange, setSelectRows } = useTableRowSelect();
        const ruleFormRef = ref<any>();
        const state = reactive<any>({
            form: {
                orderNumber: null,
                changeName: null,
                orderStatus: null
            },
            visible: false,
            rules: {
                opinion: [{ required: true, message: '变更说明不能为空', trigger: 'blur' }]
            },
            statusOptions: [
                { name: '待发起', value: 0 },
                { name: '待审批', value: 1 },
                { name: '处理中', value: 2 },
                { name: '待确认', value: 3 },
                { name: '已关闭', value: 4 },
                { name: '待回顾', value: 5 },
                { name: '已回顾', value: 6 }
                //{ name: '已取消', value: 7 },
            ],
            list: [],
            paginationConfig: {
                total: 0,
                pageSize: 20, // 每页中显示10条数据
                showSizeChanger: true,
                pageSizeOptions: ['5', '10', '15', '20', '50'], // 每页中显示的数据
                showTotal: (total: number) => `共有 ${total} 条数据`, // 分页中显示总的数据
                current: 1
            },
            loading: false
        });
        const tableColumns = [
            {
                title: '工单编号',
                dataIndex: 'orderNumber',
                width: 200,
                fixed: 'left'
            },
            {
                title: '工单名称',
                dataIndex: 'changeName',
                width: 300
            },
            {
                title: '变更申请人',
                dataIndex: 'changeApplicant',
                width: 100
            },
            {
                title: '工单类型',
                dataIndex: 'changeType',
                width: 100
            },
            {
                title: '状态',
                dataIndex: 'orderStatus',
                width: 100
            }
        ];
        const getCheckboxProps = (record) => {
            return {
                disabled: record.orderStatus === '已取消',
                ...record
            };
        };
        const open = () => {
            state.visible = true;
            setSelectRows([], []);
            state.form = {
                orderNumber: null,
                changeName: null,
                orderStatus: null
            };
            getList();
        };
        const handleTableChange = (val) => {
            state.paginationConfig = val;
            getList();
        };
        const getList = async () => {
            state.loading = true;
            const { success, moule, totalCount } = await api.changeOrderModel.getOrderDataAll({
                pageNum: state.paginationConfig.current,
                pageSize: state.paginationConfig.pageSize,
                involveSystem: props.detail.pmpProductDetailDTO.catalogCode,
                ...state.form
            });
            if (success) {
                state.list = [...moule].map((item) => ({
                    ...item,
                    id: item.orderNumber
                }));
                state.paginationConfig.total = totalCount;
            }
            state.loading = false;
        };
        const handleSave = async () => {
            const query = {
                versionId: props.detail.id,
                orderNumber: allSelectedRows.value[0].orderNumber
            };
            const { success, errorMsg } = await api.changeOrderModel.saveVersionChangeOrder(query);
            if (success) {
                emit('success');
                state.visible = false;
            } else {
                message.error(errorMsg);
            }
        };
        const handleCancel = () => {
            state.visible = false;
        };
        const handleSearch = () => {
            setSelectRows([], []);
            state.paginationConfig.current = 1;
            getList();
        };
        const handleRowClick = (record, rowKey) => {
            if (record.orderStatus === '已取消') {
                return;
            }
            setSelectRows([record.orderNumber], [record]);
        };
        return {
            ruleFormRef,
            ...toRefs(state),
            tableColumns,
            open,
            handleSave,
            handleCancel,
            handleTableChange,
            getCheckboxProps,

            selectedRowKeys,
            allSelectedRows,

            handleSearch,
            onSelectChange,
            handleRowClick
        };
    }
});
</script>

<style scoped lang="less">
.cell-item {
    font-size: 14px;
    cursor: pointer;
    color: #344563;
    margin-right: 8px;
}
::v-deep(.ant-table-row) {
    cursor: pointer;
}
</style>